<!--
 * @Author: your name
 * @Date: 2021-11-19 21:19:33
 * @LastEditTime: 2021-11-22 15:30:10
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \jf-nlitc\src\views\Home\xmxz\index.vue
-->
<template>
  <div>
    <div class="right" v-if="usablePushActive && usablePushData">
      <div style="display: flex;">
        <div
          class="arrow"
          style="font-size:30px;margin-top: 8px;margin-right: 10px;"
        >
          >
        </div>
        <div class="radio">
          <el-radio-group v-model="radio1" @change="ClickButton">
            <el-radio-button label="方案1"></el-radio-button>
            <el-radio-button label="方案2"></el-radio-button>
            <el-radio-button label="方案3"></el-radio-button>
          </el-radio-group>
        </div>
      </div>

      <div class="labelOne" v-show="radio1 == '方案1'">
        <One />
      </div>

      <div class="labelTwo" v-show="radio1 == '方案2'">
        <Two />
      </div>
      <div class="labelThree" v-show="radio1 == '方案3'">
        <Three />
      </div>
    </div>
    <Tankuang v-if="IsShowRight" />
    <Yabhhh1 v-if="IsShowRight1" />
    <Tankuang2 v-if="IsShowRight2" />
  </div>
</template>

<script>
import { mapState } from "vuex";
import One from "../right/usableRightChild/one.vue";
import Two from "../right/usableRightChild/Two.vue";
import Three from "../right/usableRightChild/Three.vue";
import Tankuang from "../right/usableRightChild/tankuang.vue";
import Yabhhh1 from "../right/usableRightChild/yabhhh1.vue";
import Tankuang2 from "../right/usableRightChild/tankuang2.vue"
export default {
  data() {
    return {
      radio1: "方案1",
      polygonDatasID: [],
    };
  },
  computed: {
    ...mapState("Sjsx", ["IsShowRight", "usablePushActive", "usablePushData","IsShowRight1","IsShowRight2"]),
  },
  watch: {
    usablePushData: {
      handler(newval) {
        console.log(newval, "新的可推送面的值");
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    async ClickButton(val) {
      console.log(this.usablePushData, "可推送画面的数据");
      await window.__g.polygon.delete(this.polygonDatasID);
      // 将面的高度设为1，防止面叠加时出现闪烁
      this.usablePushData.forEach((item) => {
        item.geometry.coordinates &&
          item.geometry.coordinates.forEach((element) => {
            if (
              element instanceof Array &&
              element[0] instanceof Array &&
              element[0][0] instanceof Array
            ) {
              element.forEach((mon) => {
                mon.forEach((min) => {
                  min[2] = 1;
                });
              });
            } else {
              element[2] = 1;
            }
          });
      });

      if (val === "方案1") {
        console.log("方案1");
        let polygonData = []; // 保留画面数据
        let o = {
          id: this.usablePushData[0].id + "_" + "highlight",
          coordinates: this.usablePushData[0].geometry.coordinates,
          color: [1, 0, 0, 0.8],
          frameColor: [1, 1, 0, 0.8], //边框颜色
          frameThickness: 1, //边框厚度
          intensity: 1, //亮度
          // style: window.PolygonStyle.SingleColor, //单色 请参照API开发文档选取枚举
          style: 0,
          depthTest: false, //是否做深度检测
          //   coordinateType: 1,
        };

        polygonData.push(o);
        console.log(polygonData, "--123456---");
        polygonData.forEach((element) => {
          this.polygonDatasID.push(element.id);
        });
        await window.__g.polygon.add(polygonData);
        console.log("添加完成");
      }
      if (val === "方案2") {
        console.log("方案2");
        let polygonData = []; // 保留画面数据
        let o = {
          id: this.usablePushData[1].id + "_" + "highlight",
          coordinates: this.usablePushData[1].geometry.coordinates,
          color: [1, 0, 0, 0.8],
          frameColor: [1, 1, 0, 0.8], //边框颜色
          frameThickness: 1, //边框厚度
          intensity: 1, //亮度
          // style: window.PolygonStyle.SingleColor, //单色 请参照API开发文档选取枚举
          style: 0,
          depthTest: false, //是否做深度检测
          //   coordinateType: 1,
        };

        polygonData.push(o);
        console.log(polygonData, "--123456---");
        polygonData.forEach((element) => {
          this.polygonDatasID.push(element.id);
        });
        await window.__g.polygon.add(polygonData);
        console.log("添加完成");
      }
      if (val === "方案3") {
        console.log("方案3");
        let polygonData = []; // 保留画面数据
        let o = {
          id: this.usablePushData[2].id + "_" + "highlight",
          coordinates: this.usablePushData[2].geometry.coordinates,
          color: [1, 0, 0, 0.8],
          frameColor: [1, 1, 0, 0.8], //边框颜色
          frameThickness: 1, //边框厚度
          intensity: 1, //亮度
          // style: window.PolygonStyle.SingleColor, //单色 请参照API开发文档选取枚举
          style: 0,
          depthTest: false, //是否做深度检测
          //   coordinateType: 1,
        };

        polygonData.push(o);
        console.log(polygonData, "--123456---");
        polygonData.forEach((element) => {
          this.polygonDatasID.push(element.id);
        });
        await window.__g.polygon.add(polygonData);
        console.log("添加完成");
      }
    },
  },
  created() {},
  mounted() {
    console.log(this.usablePushData, "可推送画面的数据");

    // let polygonData = []; // 保留画面数据
    // let o = {
    //   id: this.usablePushData[0].id + "_" + "highlight",
    //   coordinates: this.usablePushData[0].geometry.coordinates,
    //   color: [1, 0, 0, 0.8],
    //   frameColor: [1, 1, 0, 0.8], //边框颜色
    //   frameThickness: 1, //边框厚度
    //   intensity: 1, //亮度
    //   // style: window.PolygonStyle.SingleColor, //单色 请参照API开发文档选取枚举
    //   style: 0,
    //   depthTest: false, //是否做深度检测
    //   //   coordinateType: 1,
    // };

    // polygonData.push(o);
    // console.log(polygonData, "--123456---");
    // polygonData.forEach((element) => {
    //   this.polygonDatasID.push(element.id);
    // });
    // window.__g.polygon.add(polygonData);
    // console.log("添加完成");
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  components: {
    One,
    Two,
    Three,
    Tankuang,
    Yabhhh1,Tankuang2
  },
};
</script>

<style lang="scss" scoped>
.right {
  width: 23.5%;
  height: calc(100% - 120px);
  position: absolute;
  right: 0px;
  top: 95px;
  border-radius: 4px;

  // background: linear-gradient(
  //   -90deg,
  //   rgba(37, 52, 80, 0.8) 0%,
  //   rgba(5, 49, 126, 0) 100%
  // );
  background: linear-gradient(
    -90deg,
    rgba(12, 19, 36, 0.8) 0%,
    rgba(1, 28, 73, 0.5) 100%
  );
  // background: rgb(49, 180, 174);
  // border: 1px solid #fff;
  // background: linear-gradient(
  //   -90deg,
  //   rgba(37, 52, 80, 0.8) 0%,
  //   rgba(5, 49, 126, 0) 100%
  // );
  padding: 5px 5px;
  .dataFrom {
    padding-top: 15px;
    padding-bottom: 5px;
    font-size: 18px;
    color: #fff;
  }
  .labelOne,
  .labelTwo {
    margin-top: 12px;
    // height: 730px;
    height: calc(100% - 90px);
    width: 505px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-right: 60px;
    // padding-left: 10px;
    &::-webkit-scrollbar {
      width: 4px;
    }
    &::-webkit-scrollbar-thumb {
      // background: -webkit-gradient(
      //             linear,
      //             left top,
      //             left bottom,
      //             from(#83a6a6),
      //             to(#483d8b)        
      // );
      // background: linear-gradient(180deg, #83a6a6, #483d8b, #83a6a6);
      background: linear-gradient(
        180deg,
        rgba(131, 166, 166, 0.1),
        rgba(131, 166, 166, 0.8),
        rgba(131, 166, 166, 0.1)
      );
      border-radius: 10px;
    }
    &::-webkit-scrollbar-track-piece {
      background: transparent;
    }
  }
}
</style>

<style lang="scss">
.el-radio-button__inner {
    background: rgba(0, 0, 0, 0) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 4px;
}
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
  color: #fff;
  border: none !important;
  box-shadow: none !important;
}
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background-color: #5b9bd5 !important;
}
</style>
